<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/zui/1.5.0/css/zui.min.css">

	</head>

	<body>
		<div id="example-2">
			<simple-counter></simple-counter>
			<simple-counter></simple-counter>
			<simple-counter></simple-counter>
			<button @click="Test()">{{}}</button>
		</div>
		<div id="test">
			<child message="hello!"></child>
			  <child v-bind:message="parentMsg"></child>
		</div>
		<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script src="vue.min.js"></script>
		<script>
			var data = {
				counter: 0
			}
			Vue.component('simple-counter', {
				template: '<button @click="Test()">{{ counter }}</button>',
				// data 是一个函数，因此 Vue 不会警告，
				// 但是我们为每一个组件返回了同一个对象引用
				//为每个组件返回新的 data 对象来解决这个问题：
				data: function() {
					return {
						counter: 0
					}
				}
			})
			new Vue({
				el: '#example-2',
				methods:{
					Test:function(){
						console.log('aa')
					}
				}
			})
			
			
			
			
			Vue.component('child', {
				// 声明 props
				props: ['message'],
				// 就像 data 一样，prop 可以用在模板内
				// 同样也可以在 vm 实例中像 “this.message” 这样使用
				template: '<span>{{ message }}</span>'
			})
			var test = new Vue({
				el: '#test',
				data:{
					parentMsg:'aaa'
				}
			})
			
		</script>
	</body>

</html>